<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画板</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        body{
            background: gainsboro;
        }
        #cav{
            background: #ffffff;
            position: relative;
        }
        #sel{
            display: block;
            width: 1190px;
            height: 30px;
            background: white;
            padding: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function (){
            //获得画板
            var cav = document.getElementById("cav");
            //获得绘画环境
            var cv = cav.getContext('2d');
            //画笔默认粗细
            cv.lineWidth=10;
            cav.onmousedown=function (e){
                ev = window.event || e;
                var s1 = ev.offsetX || ev.layerX;
                var s2 = ev.offsetY || ev.layerY;
                cv.beginPath();
                cv.moveTo(s1,s2);
                cav.onmousemove = function (e){
                    var over_ev = window.event || e;
                    var over1 = over_ev.offsetX || over_ev.layerX;
                    var over2 = over_ev.offsetY || over_ev.layerY;
                    cv.lineTo(over1,over2);
                    cv.stroke();
                }
            }
            //鼠标抬起
            cav.onmouseup = function (){
                cav.onmousemove=null;
            },
                document.getElementById("ys").onchange=function (){
                cv.strokeStyle=this.value;
                },
                document.getElementById("cx").onchange=function (){
                var cx = this.value;
                cv.lineWidth= cx;
                document.getElementById("cx_txt").innerHTML = cx;
                }
        }
    </script>
</head>
<body>
<div id="sel">
    颜色：<input type="color" name="" id="ys" value="">
    粗细:<input type="range" min="1" max="30" value="10" id="cx">
</div>
<canvas id="cav" width="1200px" height="800px"></canvas>
</body>
</html>